<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.css">
    <link rel="stylesheet" href="/css/my01.css">
</head>
<body>
<!--导航条-->
<div class="m-container">
    <nav class="ui segment inverted attached m-padded-mini m-shadow-small">
        <div class="ui container">
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui teal header item"> L E A R N </h2>
                <a th:href="@{/system/front/learn}" class="m-item item m-mobile-hide"><i class="home icon"></i>首页</a>
                <p th:if="${user != null}" id = "username" class="m-item item m-mobile-hide"><i class="user icon"></i>[[${user.userName}]]</p>
                <a th:if="${user != null}" href="javascript:;" class="m-item item m-mobile-hide"><i class="fa fa-circle text-success"></i> 在线</a>
                <a th:if="${user != null}" th:href="@{/logout}" style="padding-left:5px;" class="m-item item m-mobile-hide"><i class="fa fa-sign-out text-danger"></i> 注销</a>
                <a th:unless="${user != null}" th:href="@{/login}" class="m-item item m-mobile-hide"><i class="user icon"></i>去登录</a>
                <div class="right m-item item m-mobile-hide">
                    <div class="ui icon inverted transparent input m-margin-tb-tiny">
                        <!--全局搜索-->
                        <form name="search" action="#" th:action="@{/system/front/learn}" method="POST" target="_blank">
                            <div class="ui icon inverted transparent input m-margin-tb-tiny">
                                <input type="text" name="title" placeholder="Search...." th:value="${title}">
                                <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <a href="" class="black t_menu icon ui button m-mobile-show m-right-top ">
            <i class="sidebar icon"></i>
        </a>
    </nav>
    <!--中间部分-->
    <div class="m-container m-padded-tb-large">
        <div class="ui container">
            <div class="ui stackable grid">
                <!--左边博客内容-->
                <div class="wide column">
                    <!--header-->
                    <div class="ui top attached segment">
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <h3 class="ui teal header"> L E A R N </h3>
                            </div>
                            <div class="right aligned column">
                                <i class="icon book large"></i> <h2 class="ui orange header m-inline-block" th:text="${content.title}">14</h2>
                            </div>
                        </div>
                    </div>
                    <!--content-->
                    <div class="ui attached segment">
                        <div class="ui vertical segment">
                            <p class="ui teal header">请简要回答以下问题:</p>
                            <br>
                            <div class="ui stackable grid mobile reversed">
                                <div class="eleven wide column exam-item" th:each="exam, iterStat : ${exams}">
                                    <input name="examId" type="hidden" th:value = "${exam.examId}" />
                                    <input name="contentId" type="hidden" th:value = "${exam.contentId}" />
                                    <h3 class="header"><p th:text="${iterStat.count + '. ' + exam.question}"></p></h3>
                                    <textarea  name="answerContent" placeholder="请输入你的答案" class="input-large"></textarea>
                                </div>
                            </div>
                            <br>
                            <a th:if="${exams != null && exams.size > 0}" href="" id="answer_btn" class="custom-button">提交答案</a>
                        </div>
                    </div>
            </div>
        </div>
    </div>
        <div id="userData" style="display: none;" th:text="${user}"></div>

</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.10/semantic.min.js"></script>
<script>
    $(document).ready(function() {
        $("#answer_btn").click(function(e) {
            e.preventDefault(); // 阻止默认提交行为
            var formDataList = [];
            $(".exam-item").each(function() {
                var examData = {
                    examId: $(this).find("input[name='examId']").val(),
                    contentId: $(this).find("input[name='contentId']").val(),
                    answerContent: $(this).find("textarea[name='answerContent']").val()
                };
                formDataList.push(examData);
            });

            var jsonData = JSON.stringify(formDataList);
            console.log("JSON Data: " + jsonData);

            // 发起 AJAX 请求提交答案到后台
            $.ajax({
                url: "/system/record/add",
                type: "POST",
                contentType: "application/json",
                data: jsonData,
                success: function(response) {
                    alert("提交成功");
                    window.location.href = "/system/front/detail/[[${content.contentId}]]"
                },
                error: function(xhr, status, error) {
                    console.error("提交失败", error);
                    alert("提交失败")
                }
            });

        });
    });
</script>
</html>